<!-- 助力活动 -->
<template>
  <div class="box">
    <van-nav-bar title="助力免单" fixed placeholder left-arrow
      @click-left="$router.back()"/>
    <!-- 规则 -->
    <div class="rule">
      <h2>幸运享免单   商品免费拿</h2>
      <div class="desc">
        24小时内邀请好友助力-----------即享免单权力
      </div>
      <div class="ruleBtn" @click="showPopup">规则</div>
      <van-popup v-model="show" closeable round close-icon-position="top-right">
        <div class="relueContent">
          <div class="relutitle">活动规则</div>
          <p v-for="(item,index) in reuleList" :key="index">{{item}}</p>
        </div>
        
      </van-popup>
    </div>
    <!-- 查看我的免单 -->
    <div class="myFree">
      <van-cell value="点击查看" is-link icon="contact" border  @click="showhelp">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title" >我的免单</span>
      </template>
    </van-cell>
    </div>
    <!-- 助力商品列表 -->
    <div class="goodslist">
      <van-card
          v-for="item in helpList"
          :key="item.goodsId"
          :centered='true'
          price="0"
          :origin-price='item.goods.goodsMarketPrice'
          :desc="item.goods.goodsDesc"
          :title="item.goods.goodsName"
          :thumb="'http://172.17.4.241/8887/upload/'+item.goods.goodsImg"
        >
          <template #price-top>
<!--              秒杀开始-->

            <div v-if="(new Date(item.helpEndTime)).getTime()-new Date().getTime()>0">
                距离本轮结束还剩
                <van-count-down :time="(new Date(item.helpEndTime)).getTime()-new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒" />
                <div>需要 <span class="red"> {{item.helpNum}}人 </span> 助力</div>
            </div>

<!--              秒杀未开始-->
              <div v-else-if="(new Date(item.helpStartTime)).getTime()-new Date().getTime()>0">
                  距离本轮开抢还有
                  <van-count-down :time="(new Date(item.helpStartTime)).getTime()-new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒" />
              </div>



<!--              秒杀结束-->
              <div v-else-if="(new Date(item.helpEndTime)).getTime()-new Date().getTime()<0">
                  本轮已结束
<!--                  <div> {{item.helpNum}}人为你助力</div>-->
              </div>

          </template>



          <template #footer>
            <van-button size="small" icon="arrow" icon-position="right" 
            color="linear-gradient(to right, #ff6034, #ee0a24)" @click="buyNow(item)"  v-if='(new Date(item.helpEndTime)).getTime()-new Date().getTime()>0'>马上抢</van-button>
            <van-button size="small" icon="arrow" icon-position="right" v-else-if='(new Date(item.helpStartTime)).getTime()-new Date().getTime()>0'
            color="linear-gradient(to right, #ff6034, #ee0a24)" disabled>未开始</van-button>
            <van-button size="small" icon="arrow" icon-position="right" v-else-if='(new Date(item.helpEndTime)).getTime()-new Date().getTime()<0'
            color="gray" disabled>已结束</van-button>
          </template>
        </van-card>
    </div>
  
      <van-popup v-model="showAddress" closeable round close-icon-position="top-right" position="bottom">
        <div class="selectAddress">选择收货地址</div>
        <van-address-list
          v-model="chosenAddressId"
          :list="addressList"
          default-tag-text="默认"
          @add="onAdd"
          @select="selectAddress"
          @edit="onEdit"
        >
        <van-cell value="暂无地址" v-if="haveAddress"/>
        </van-address-list>
        <van-button type="warning" block round  @click="showShare = true">分享好友助力</van-button>
      </van-popup>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
  </div>
</template>

<script>
export default {
  name:'helpGoods',
  data () {
    return {
      showShare:false,
       show: false,
       showAddress:false,
       haveAddress:false,
        time:'',
       userId:'',
       reuleList:[
         '1.邀请好友助力,达到助力人数,即可享免单权利',
         '2.每个新用户仅可助力一次。同一设备、为信号视为同一用户',
         '3.若发现用户存在刷单、虚假用户助力等违规行为,平台有权利判定助力失败',
         '4.邀请到足够好友帮你助力成功之后,可前往我的订单查看发货与物流详情',
         '5.对物流、商品有疑问或者需要修改收获地址请联系商家客服处理'
       ],
       options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
        ],
      ],
       helpList:[],
       chosenAddressId: '1',
       addressList: [
          {
            id: '1',
            name: '张三',
            tel: '13000000000',
            address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
            isDefault: true,
          },
          {
            id: '2',
            name: '李四',
            tel: '1310000000',
            address: '浙江省杭州市拱墅区莫干山路 50 号',
          },
        ],
    }
  },
  created(){
    this.getHelpGoods()
  },
  methods: {


    getHelpGoods(){
      this.$axios.post('/api/marketHelp/getAllHelp?limit=1000').then(res=>{
          console.log('所有助力')
        console.log(res)
        if(res.data.code==200){
          this.helpList=res.data.data
        }
        //   console.log('助力列表')
        // console.log(this.helpList)
      })
    },
    showPopup() {
      this.show = true;
    },
    onSelect(option) {
      if(option.name){
        this.$toast.success("分享成功");
        this.showShare = false;

          //设置用户id
          sessionStorage.setItem('userId',1)

          var helpObj = JSON.parse(sessionStorage.getItem('helpObj'));
          var userId = sessionStorage.getItem('userId');

          //发起助力
          this.$axios.post('/api/marketHelp/userStartHelp?userId='+userId+'&helpId='+helpObj.helpId+'&goodsFormatId='+helpObj.goodsId).then((res)=>{
              // console.log('  发起助力信息')
              console.log(res);


          })


      }
        this.$router.push('/myHelp')
      
    },
    isHaveAddress(){
       //判断用户是否有地址 默认地址
        this.$axios({
          url:'/api/address/list',
          method:'post',
          params:{userId:this.userId}
        }).then(res=>{
          console.log(res)
          if(res.data.code==200){
            var addressList=res.data.data
            if(addressList.length>0){
              addressList.forEach(item => {
                this.addressList.push({
                  id: item.addressId,
                  name: item.addressName,
                  tel: item.addressPhone,
                  address: item.addressContent,
                  isDefault: item.isDefault==1?true:false
                })
              });
              
              
            }else{
              this.haveAddress=true
            }
          }
        })
     },
    buyNow(obj){
        if(JSON.parse(sessionStorage.getItem('isLogin')) ){
        this.userId=JSON.parse(sessionStorage.getItem('user')).userId
        this.showAddress = true;
      }else{
        this.$toast.fail('请先登录')
          this.$router.push('/my')
      }

        // 当前助力信息（用户id，助力id，规格id）
        sessionStorage.setItem('helpObj',JSON.stringify(obj))

    },
    onAdd() {
      this.$toast('新增地址');
    },
    selectAddress(item,index){
      // console.log(item)



        //查看个人助力





    },
    onEdit(item){
      console.log(item)
    },
      showhelp(){
          if(JSON.parse(sessionStorage.getItem('isLogin')) ){
              this.$router.push('/myHelp')
          }else{
              this.$toast.fail('请先登录')
              this.$router.push('/my')

          }
      }
  },
}
</script>

<style  scoped>

.box{
  background-color: #F7F8FA;
  margin-bottom: 60px;
}
h2{
  margin: 0;
  color: #fff;
  text-align: center;
  padding-top: 60px;
}
.rule{
  width: 100%;
  height: 200px;
  background-color: #FE752D;
  position: relative;
}
.ruleBtn{
  position: absolute;
  right: 10px;
  top: 3px;
  color: white;
  font-size: 14px;
}
.myFree{
  margin-top: 10px;
  background-color: #fff;
}
.rule .van-popup{
  width: 280px;
  height: 300px;
  background-color: #FFF5DE;
}
.relutitle{
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #F8E6BF;
  color: #633A15;
  font-size: 20px;
  font-weight: 500;
}
.relueContent p{
  padding: 0 15px;
  color: #996517;
  font-size: 13px;
}
.goodslist .van-card{
  margin-top: 10px;
  background-color: white;
}
.van-card__footer{
  margin-top: -25px;
}
.desc{
  color: white;
  line-height: 70px;
  text-align: center;
}
.selectAddress{
   height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.van-address-list__bottom{
  bottom: 45px;
}
.red{
    color: red;
}
</style>
